<template>
  <div>
    <div class="pubnote">
      <el-menu :default-active="pic_or_vlog" mode="horizontal" @select="handleSelect">
        <el-menu-item index="pub_picture">发布笔记</el-menu-item>
        <el-menu-item index="pub_vlog">发布视频</el-menu-item>
      </el-menu>

      <!-- 发布图文 -->
      <div class="note" v-if="pic_or_vlog == 'pub_picture'">
        <div class="note_real">

          <!-- cover_img -->
          <div class="cencen">
            <span>封面</span>
            <el-button type="text"> &nbsp; +上传封面</el-button> &nbsp;&nbsp; <em
              style="font-size: small; font-weight: 100;">（漂亮的封面可以吸引更多集美、集帅哦）</em>
            <br>
            <el-upload class="avatar-uploader" action="" :http-request="md_upload_cover_img" :show-file-list="false"
              :on-success="handleAvatarSuccess_pictureNode" :before-upload="beforeAvatarUpload_pictureNode">
              <img v-if="pubX_MarkDown.cover_img" :src="pubX_MarkDown.cover_img" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>

          <!-- file_address -->
          <div class="cencen">
            <h6>上传markdown笔记文件</h6>
            <el-upload class="upload-demo" drag action="" :file-list="mdFile" :http-request="upload_markdown" :limit="1">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将笔记文件拖到此处，或<em>点击上传</em></div>
              <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
            </el-upload>
          </div>

          <!-- title -->
          <div class="cencen">
            <el-input v-model="pubX_MarkDown.title" placeholder="填写标题，可能会有更多赞哦~"></el-input>
          </div>

          <!-- tag -->
          <div class="cencen">
            <!-- // 前端 折腾 Java MySQL NodeJS Python -->
            <el-radio v-model="pubX_MarkDown.tag" label="前端" border>前端</el-radio>
            <el-radio v-model="pubX_MarkDown.tag" label="折腾" border>折腾</el-radio>
            <el-radio v-model="pubX_MarkDown.tag" label="Java" border>Java</el-radio>
            <el-radio v-model="pubX_MarkDown.tag" label="MySQL" border>MySQL</el-radio>
            <el-radio v-model="pubX_MarkDown.tag" label="NodeJS" border>NodeJS</el-radio>
            <el-radio v-model="pubX_MarkDown.tag" label="Python" border>Python</el-radio>
          </div>

          <div class="pic_publish">
            <img :src="require('../../assets/mypic/pubNote.png')" alt="" srcset="">
            <div class="pub_pic_btn">
              <el-button type="primary" @click="publish_PictureNode">发布</el-button>
              <el-button plain>取消</el-button>
            </div>
          </div>
        </div>

      </div>


      <!-- 发布视频 -->
      <div class="note" v-if="pic_or_vlog == 'pub_vlog'">
        <div class="note_real">

          <!-- cover_img -->
          <div class="cencen">
            <span>封面</span>
            <el-button type="text"> &nbsp; +上传封面</el-button> &nbsp;&nbsp; <em
              style="font-size: small; font-weight: 100;">（漂亮的封面可以吸引更多集美、集帅哦）</em>
            <br>
            <el-upload class="avatar-uploader" action="" :http-request="video_upload_cover_img" :show-file-list="false"
              :on-success="handleAvatarSuccess_pictureNode" :before-upload="beforeAvatarUpload_pictureNode">
              <img v-if="pubY_Video.cover_img" :src="pubY_Video.cover_img" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </div>

          <!-- file_address_collection -->
          <div class="cencen">
            <h6>上传视频文件</h6>
            <el-upload class="upload-demo" drag action="" :file-list="videoFile" :http-request="upload_video" :limit="1">
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将笔记文件拖到此处，或<em>点击上传</em></div>
              <!-- <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div> -->
            </el-upload>
          </div>

          <!-- title -->
          <div class="cencen">
            <el-input v-model="pubY_Video.title" placeholder="填写标题，可能会有更多赞哦~"></el-input>
          </div>

          <!-- tag -->
          <div class="cencen">
            <!-- 四大件 黑马 音乐MV 下饭 网络电视 -->
            <el-radio v-model="pubY_Video.tag" label="四大件" border>四大件</el-radio>
            <el-radio v-model="pubY_Video.tag" label="黑马" border>黑马</el-radio>
            <el-radio v-model="pubY_Video.tag" label="音乐MV" border>音乐MV</el-radio>
            <el-radio v-model="pubY_Video.tag" label="下饭" border>下饭</el-radio>
            <el-radio v-model="pubY_Video.tag" label="网络电视" border>网络电视</el-radio>
          </div>

          <div class="pic_publish">
            <img :src="require('../../assets/mypic/pubNote.png')" alt="" srcset="">
            <div class="pub_pic_btn">
              <el-button type="primary" @click="publish_videoNode">发布</el-button>
              <el-button plain>取消</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fileList: [
        { name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100' }
      ],
      pic_or_vlog: 'pub_picture', // 切换发布笔记是图片还是视频
      // 图片内容预览用的对话框信息 
      dialogPictureNode: {
        dialogImageUrl: '',
        dialogVisible: false
      },
      // 图片笔记内容
      pictureNode: {
        // 封面图片
        surfacePicture: "",
        // 标题
        title: "",
        // 笔记内容
        content: "",
        // 标签
        tag: "其他",
        // 上传图片
        pictureurl: [],
      },
      // 视频笔记内容
      videoNote: {
        // 封面图片
        surfacePicture: "",
        // 标题
        title: "",
        // 笔记内容
        content: "",
        // 标签
        tag: "其他",
        // 上传图片
        videourl: "",
      },
      // 真·发布笔记
      pubX_MarkDown: {
        auther_id: window.sessionStorage.getItem("user_id"),
        auther_name: window.sessionStorage.getItem("user_name"),
        auther_avatar: window.sessionStorage.getItem("user_avatar"),
        title: '',
        cover_img: '',
        file_address: '',
        tag: '前端'
      },
      // 暂存，上传的markdown文件内容
      mdFile: [
        // {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
      ],
      // 真·发布视频
      pubY_Video: {
        auther_id: window.sessionStorage.getItem("user_id"),
        auther_name: window.sessionStorage.getItem("user_name"),
        auther_avatar: window.sessionStorage.getItem("user_avatar"),
        title: '',
        cover_img: '',
        file_address_collection: '',
        tag: '四大件'
      },
      // 暂存，上传的视频文件内容
      videoFile: [
        // {name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}
      ],
    };
  },
  methods: {
    // 导航栏
    handleSelect(key, keyPath) {
      // console.log(key);
      this.pic_or_vlog = key
    },
    // ===================================图片笔记===================================

    //-----------------------------------上传markdown文件-----------------------------------
    upload_markdown(param) {
      const formdate = new FormData()
      formdate.append('data', param.file)
      const url = '/atom/noteUpload'
      const headers = {
        'Content-Type': 'multipart/form-data'
      }
      // axios.post的构造函数有顺序，不可乱
      this.$http.post(
        url,
        formdate,
        headers
      ).then(res => {
        // console.log(data)
        this.$message.success("markdown笔记文件上传成功")
        this.mdFile.push({ name: param.file.name, url: res.data.mdfile_url })
        console.log(res.data.mdfile_url)
        this.pubX_MarkDown.file_address = res.data.mdfile_url
      }).catch(response => {
        console.log(response)
      })
    },

    // -----------------------------------笔记封面图片-----------------------------------
    // 上传封面。也使用上传头像的接口 http://localhost:3000/atom/imgUpload
    md_upload_cover_img(param) {
      const formdate = new FormData()
      formdate.append('data', param.file)
      const url = '/atom/imgUpload'
      const headers = {
        'Content-Type': 'multipart/form-data'
      }
      // axios.post的构造函数有顺序，不可乱
      this.$http.post(
        url,
        formdate,
        headers
      ).then(res => {
        // console.log(data)
        this.$message.success("图片上传成功")
        this.pubX_MarkDown.cover_img = res.data.imgfile_url

      }).catch(response => {
        console.log(response)
      })
    },
    handleAvatarSuccess_pictureNode(res, file) {
      this.pubX_MarkDown.cover_img = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload_pictureNode(file) { },

    // -----------------------------------发布markdown笔记投稿-----------------------------------
    // 发布markdown笔记 http://localhost:3000/contentSubmission/addNote
    publish_PictureNode() {
      this.$http({
        url: '/contentSubmission/addNote',
        params: {
          auther_id: this.pubX_MarkDown.auther_id,
          auther_name: this.pubX_MarkDown.auther_name,
          auther_avatar: this.pubX_MarkDown.auther_avatar,
          title: this.pubX_MarkDown.title,
          cover_img: this.pubX_MarkDown.cover_img,
          file_address: this.pubX_MarkDown.file_address,
          tag: this.pubX_MarkDown.tag
        },
        method: 'post'
      }).then(res => {
        this.$message.success("笔记上传成功！")
        // 成功后清空
        this.pubX_MarkDown = {
          auther_id: window.sessionStorage.getItem("user_id"),
          auther_name: window.sessionStorage.getItem("user_name"),
          auther_avatar: window.sessionStorage.getItem("user_avatar"),
          title: '',
          cover_img: '',
          file_address: '',
          tag: '前端'
        }
      }).catch(res => {
        console.log(res);
        this.$message.error("笔记上传失败！")
      })
    },






    // ===================================视频投稿===================================

    // -----------------------------------视频封面图片-------------------------------
    // 上传封面。也使用上传头像的接口
    video_upload_cover_img(param) {
      const formdate = new FormData()
      formdate.append('data', param.file)
      const url = '/atom/imgUpload'
      const headers = {
        'Content-Type': 'multipart/form-data'
      }
      // axios.post的构造函数有顺序，不可乱
      this.$http.post(
        url,
        formdate,
        headers
      ).then(res => {
        // console.log(data)
        this.$message.success("图片上传成功")
        this.pubY_Video.cover_img = res.data.imgfile_url

      }).catch(response => {
        console.log(response)
      })
    },
    handleAvatarSuccess_videoNode(res, file) {
      this.videoNote.surfacePicture = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload_videoNode(file) { },

    // -----------------------------------视频上传-----------------------------------
    // 地址 http://localhost:3000/atom/videoUpload  name: param.file.name
    upload_video(param) {
      const formdate = new FormData()
      formdate.append('data', param.file)
      const url = '/atom/videoUpload'
      const headers = {
        'Content-Type': 'multipart/form-data'
      }
      // axios.post的构造函数有顺序，不可乱
      this.$http.post(
        url,
        formdate,
        headers
      ).then(res => {
        // console.log(data)
        this.$message.success("视频文件上传成功")
        this.videoFile.push({ name: param.file.name, url: res.data.videofile_url })
        console.log(res.data.videofile_url)
        this.pubY_Video.file_address_collection = res.data.videofile_url
      }).catch(response => {
        console.log(response)
      })
    },
    // -----------------------------------发布视频-----------------------------------
    // 发布视频投稿  http://localhost:3000/contentSubmission/addVideo
    publish_videoNode() {
      this.$http({
        url: '/contentSubmission/addVideo',
        params: {
          auther_id: this.pubY_Video.auther_id,
          auther_name: this.pubY_Video.auther_name,
          auther_avatar: this.pubY_Video.auther_avatar,
          title: this.pubY_Video.title,
          cover_img: this.pubY_Video.cover_img,
          file_address_collection: this.pubY_Video.file_address_collection,
          tag: this.pubY_Video.tag
        },
        method: 'post'
      }).then(res => {
        this.$message.success("视频投稿上传成功！")
        // 成功后清空
        this.pubY_Video = {
          auther_id: window.sessionStorage.getItem("user_id"),
          auther_name: window.sessionStorage.getItem("user_name"),
          auther_avatar: window.sessionStorage.getItem("user_avatar"),
          title: '',
          cover_img: '',
          file_address_collection: '',
          tag: '四大件'
        }
      }).catch(res => {
        console.log(res);
        this.$message.error("视频投稿上传失败！")
      })
    }
  }
}
</script>

<style lang="less" scoped>
.pubnote {
  width: 60%;
  height: 100%;
  background-color: white;
  border-radius: 20px;
  // overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow: scroll;

  .el-menu--horizontal.el-menu {
    padding-left: 8px;
    padding-right: 8px;
  }
}

.pubnote::-webkit-scrollbar {
  width: 0;
  height: 0;
  background-color: transparent;
}

.note {
  position: relative;
  width: 100%;
  height: 95%;

  .note_real {
    width: 96%;
    height: 96%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    // background-color: aquamarine;
  }
}

.cencen {
  margin-top: 10px;
}

.pic_publish {
  position: relative;
  margin-top: 24px;
  background-color: rgb(238, 241, 248);
  width: 30%;
  height: 65px;
  line-height: 65px;
  border-radius: 10px;

  img {
    height: 65px;
    width: auto;
  }

  .pub_pic_btn {
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translateY(-50%);
  }
}
</style>